<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Canvas 模式</title>
		<style>
			body {
				background: #666;
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			canvas {
				background: #fff;
			}

			h1 {
				color: #fff;
				font-size: 24px;
			}
		</style>
	</head>

	<body>
		<h1>模式</h1>
		<canvas id="drawing" width="500" height="500"></canvas>
		<script>
			/** @type {HTMLCanvasElement} */
			var drawing = document.getElementById('drawing');
			if (drawing.getContext) {
				const ctx = drawing.getContext('2d');

				ctx.globalAlpha = 0.5; // 设置绘图的当前透明值

				let img = new Image();
				img.src = '/assets/img/荷叶.jpg';

				img.onload = () => {
					// TODO 创建模式 img 、图片平铺的方式
					let pattern = ctx.createPattern(
						img,
						// 'repeat',    // 平铺
						'repeat-x',  // 横向平铺
						// 'repeat-y' // 纵向平铺
						// 'no-repeat',    // 不平铺
					);

					// TODO 绘制模式
					ctx.fillStyle = pattern;
					ctx.fillRect(50, 50, 500, 500);
					ctx.globalAlpha = 1;

					ctx.fillStyle = 'red';
					ctx.fillRect(350, 100, 100, 100);
				};
			}
		</script>
	</body>
</html>
